<template>
    <div>
        <div class="hot-item" v-for="hotClassify in list" :key="hotClassify._system_record_entry_id">
            <img :src="hotClassify.image">
            <p>{{hotClassify.title}}</p>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return new Array(16);
            }
        }
    }
}
</script>
<style lang="less" scoped>
.hot-box>.hot-item{
    width:25%;
    box-sizing:border-box;
    height:3rem;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    padding:0 0.1rem 0.2rem 0.1rem;
    >img{
        width:100%;
        height:60%;
        border-radius:0.2rem;
    }
    >p{
        font-size:0.3rem;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
}
.content-detail-type>.hot-item{
    width:33%;
    box-sizing:border-box;
    height:3rem;
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    padding:0 0.1rem 0.2rem 0.1rem;
    >img{
        width:100%;
        height:60%;
        border-radius:0.2rem;
    }
    >p{
        font-size:0.3rem;
        overflow: hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
}
</style>